<v-app-bar app color="white" style="z-index: 100;">
  <div class="d-flex align-center" style="width: 100%">
    <div v-if="!$vuetify.breakpoint.xs" title="返回首页" style="height: 64px;cursor: pointer; display: flex; align-items: center;"
      @click="()=>{window.location.href = '/'}">
      <svg width="140" height="35" xmlns="http://wwww.w3.org/2000/svg">
        <g transform="translate(-115 0)">
          <path id="path337059"
            d="m 412.48869,-36.792 q 10.512,0 14.688,4.536 4.176,4.464 2.664,14.904 -1.44,10.08 -6.192,14.184 -4.68,4.032 -14.904,4.032 -10.44,0 -14.76,-4.464 -4.248,-4.464 -2.736,-14.76 1.44,-10.224 6.12,-14.328 4.68,-4.104 15.12,-4.104 z m -0.216,9.216 q -3.6,0 -5.04,2.016 -1.44,1.944 -2.376,8.208 -0.792,5.544 0,7.344 0.864,1.728 4.32,1.728 3.384,0 4.824,-2.016 1.44,-2.016 2.304,-8.064 0.864,-5.616 0.072,-7.416 -0.792,-1.8 -4.104,-1.8 z"
            stroke-width="0" stroke-linejoin="miter" stroke-miterlimit="2" fill="#09f463" stroke="#09f463"
            transform="scale(0.4) translate(0 60)"></path>
          <path id="path337061"
            style="font-style:oblique;font-weight:800;font-size:72px;line-height:1;font-family:'Exo 2';font-variant-ligatures:none;text-align:center;text-anchor:middle"
            d="m 448.67319,-35.784 v 6.552 q 7.128,-7.416 14.616,-7.416 12.456,0 9.864,19.584 -0.72,5.616 -2.232,9.288 -1.44,3.672 -3.744,5.544 -2.304,1.872 -4.824,2.52 -2.448,0.72 -5.976,0.72 -5.184,0 -10.224,-1.008 0,3.312 -0.504,6.768 l -1.08,6.552 h -13.104 l 6.84,-49.104 z m -1.08,28.368 h 4.32 q 4.392,0 5.688,-1.656 1.368,-1.656 2.232,-7.776 0.792,-5.904 0.36,-7.704 -0.432,-1.872 -2.448,-1.872 -3.672,0 -8.28,4.464 z"
            stroke-width="0" stroke-linejoin="miter" stroke-miterlimit="2" fill="#07e771" stroke="#07e771"
            transform="scale(0.4) translate(0 60)"></path>
          <path id="path337063"
            style="font-style:oblique;font-weight:800;font-size:72px;line-height:1;font-family:'Exo 2';font-variant-ligatures:none;text-align:center;text-anchor:middle"
            d="m 511.77894,-10.152 0.864,8.136 q -6.408,2.88 -16.416,2.88 -11.088,0 -15.12,-4.68 -4.032,-4.752 -2.952,-14.544 1.224,-10.728 6.12,-14.544 4.968,-3.888 15.192,-3.888 10.152,0 13.896,3.24 3.744,3.168 2.808,9.648 -0.72,4.824 -4.176,6.84 -3.384,1.944 -10.8,2.52 l -9.72,0.72 q 0.072,2.736 1.44,3.672 1.368,0.864 4.608,0.864 6.84,0 14.256,-0.864 z m -19.512,-10.584 6.048,-0.576 q 2.664,-0.216 3.816,-0.936 1.224,-0.792 1.44,-2.952 0.144,-1.728 -0.72,-2.232 -0.864,-0.576 -3.6,-0.504 -3.312,0.072 -4.752,1.512 -1.368,1.368 -2.232,5.688 z"
            stroke-width="0" stroke-linejoin="miter" stroke-miterlimit="2" fill="#05da7f" stroke="#05da7f"
            transform="scale(0.4) translate(0 60)"></path>
          <path id="path337065"
            style="font-style:oblique;font-weight:800;font-size:72px;line-height:1;font-family:'Exo 2';font-variant-ligatures:none;text-align:center;text-anchor:middle"
            d="m 533.67931,-35.784 0.144,6.696 q 7.848,-7.704 15.984,-7.704 4.608,0 7.2,2.664 2.592,2.664 1.872,7.56 L 555.13531,0 h -13.104 l 3.168,-22.464 q 0.288,-2.016 -0.216,-2.664 -0.432,-0.72 -1.944,-0.576 -3.384,0.072 -8.496,4.104 l -3.024,21.6 h -13.104 l 4.968,-35.784 z"
            stroke-width="0" stroke-linejoin="miter" stroke-miterlimit="2" fill="#04ce8c" stroke="#04ce8c"
            transform="scale(0.4) translate(0 60)">
          </path>
          <path id="path337067"
            style="font-style:oblique;font-weight:800;font-size:72px;line-height:1;font-family:'Exo 2';font-variant-ligatures:none;text-align:center;text-anchor:middle"
            d="m 582.73831,-27.576 -2.16,15.408 q -0.288,1.728 0.216,2.304 0.504,0.504 2.376,0.504 h 4.464 l 0.648,8.712 q -4.176,1.584 -11.016,1.584 -5.328,0 -8.136,-2.808 -2.736,-2.808 -2.016,-7.56 l 2.664,-18.144 h -6.264 l 1.008,-7.848 6.48,-0.36 1.44,-9.648 h 12.888 l -1.368,9.648 h 9.144 l -1.152,8.208 z"
            stroke-width="0" stroke-linejoin="miter" stroke-miterlimit="2" fill="#02c19a" stroke="#02c19a"
            transform="scale(0.4) translate(0 60)">
          </path>
          <path id="path337069"
            style="font-style:oblique;font-weight:800;font-size:72px;line-height:1;font-family:'Exo 2';font-variant-ligatures:none;text-align:center;text-anchor:middle"
            d="m 620.52256,-35.784 h 14.184 q -1.224,7.848 -4.176,16.632 -2.304,6.768 -5.544,12.528 -2.376,3.96 -5.04,5.328 -2.592,1.296 -7.344,1.296 h -9.576 q -1.512,0 -2.592,-0.936 -1.008,-0.936 -1.152,-2.376 l -4.608,-32.472 h 14.256 l 1.152,27.576 h 0.72 q 1.44,0 2.16,-0.72 0.792,-0.72 1.944,-3.24 1.728,-3.744 3.168,-9.504 1.368,-5.472 2.448,-14.112 z"
            stroke-width="0" stroke-linejoin="miter" stroke-miterlimit="2" fill="#00b4a8" stroke="#00b4a8"
            transform="scale(0.4) translate(0 60)">
          </path>
        </g>
        <image
          xlink:href=""
          id="icon" x="0" y="0" width="35" height="35"></image>
      </svg>
    </div>
    <!-- -->
    <div style="flex: 1; height: 100%" class="px-4">
      <v-text-field v-model="searchVal" @click:append="searchHandle" style="width:100%; max-width: 600px;" color="#00b96b"
        label="搜索电视剧、电影" hide-details="auto" append-icon="mdi-magnify" outlined dense></v-text-field>
    </div>
    <div>
      <v-btn text :large="$vuetify.breakpoint.mdAndUp" :small="$vuetify.breakpoint.smAndDown"
        @click="()=>{window.location.href = '/?kind=tv'}">电视剧
      </v-btn>
      <v-btn text :large="$vuetify.breakpoint.mdAndUp" :small="$vuetify.breakpoint.smAndDown"
        @click="()=>{window.location.href = '/?kind=movie'}" :class="$vuetify.breakpoint.mdAndUp?'ml-3':''">
        电影
      </v-btn>
      <v-btn text v-if="$vuetify.breakpoint.mdAndUp" color="#00b96b" class="ml-3"
        @click="()=>{window.location.href = '/admin'}">控制台</v-btn>
    </div>
  </div>
</v-app-bar>
<script>
  async function searchHandle() {
    if (this.searchVal.length < 1) {
      Snackbar.show({ text: '请输入搜索的资源名称~', });
      return;
    }
    window.location.href = `/?search=${encodeURI(this.searchVal)}&kind=${this.kind}`;
  }
</script>